<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<!-- page uses Google App Engine templates -->        
<html>
<head>
  <title>Viewer</title>
  <script id="jquery-core" type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
  <script id="jquery-ui-core" type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js'></script>
  <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css" id="theme">


  <link rel="stylesheet" href="css/jquery.fileupload-ui.css">
  <style type="text/css">
    .body-style {
      background: white;
      font-size: .7em;
    }
    .filename-style {
      font-size: larger;
      color: #090909;
    }
    td{font-weight: bold;}
  </style>
  
  <script type="text/javascript">
  function formatDate(date, fmt) {
    function pad(value) {
        return (value.toString().length < 2) ? '0' + value : value;
    }
    return fmt.replace(/%([a-zA-Z])/g, function (_, fmtCode) {
        switch (fmtCode) {
        case 'Y':
            return date.getUTCFullYear();
        case 'M':
            return pad(date.getUTCMonth() + 1);
        case 'd':
            return pad(date.getUTCDate());
        case 'H':
            return pad(date.getUTCHours());
        case 'm':
            return pad(date.getUTCMinutes());
        case 's':
            return pad(date.getUTCSeconds());
        default:
            throw new Error('Unsupported format code: ' + fmtCode);
        }
    });
  }
  </script>
</head>

<body class="body-style ui-widget">

  {% if ISADMIN %}
  {% if DATA %}
  <form action="#" method="post" id="deleteallrecords">
  <input type="hidden" name="confirm_delete_all" id="confirm_delete_all" value="">
  </form>
  <button id="deleteallbutton">batch delete <b>all</b> records...</button>
  {% endif %}
  {% endif %}
  <form action="/viewer?pg=1" method="get">
  Filter by batch: <input type="text" name="batchid" value="{{ BATCHID }}">
    <button type="submit" id="filter">filter</button>
    <a href="/viewer?pg=1"><button id="clearfilter">clear filter</button></a>
  </form>

  {% if ISADMIN %}
  {% if DATA %}
  {% if BATCHID %}
  <form action="/deletebatch?batchid={{ BATCHID }}" method="post">
    <button id="deletebatch" type="submit">delete batch {{ BATCHID }}...</button>
  </form>
  {% endif %}
  {% endif %}
  {% endif %}

  <a href="{{ SAVEASLINK }}"><button id="saveas" type="button">Save as CSV</button></a>(limited to 2000 rows for demo)<br>
  <a href="/uploadmgr">Upload more</a>

<hr>

{% for link in LINKS %}
 <a href="{{ link.1 }}">{{ link.0 }}</a>
{% endfor %}

<table class="jtable">
<tr><td></td><td>filename</td><td>size</td><td>BatchId</td><td>Image Serving url</td><td>Redirecting url</td><td>Create Time</td></tr>
{% for row in DATA %}
<tr>
  <td class="preview">
  <a href="{{ row.imgserving_url }}"><img src="{{ row.imgserving_url }}=s100"></a><br>
 </td>
  <td class="name filename-style">{{ row.filename }}</td>
  <td class="size"><script type="text/javascript">var size={{ row.filesize  }}/1024;document.write(size.toFixed(2) + "k");</script></td>
  <td>{{ row.batchid }}</td>
  <td>{{ row.imgserving_url }}</td>
  <td>//{{ DOMAIN }}/i/{{ row.key.id }}/{{ row.filename }}</td>
  <td class="size"><script type="text/javascript">var date = new Date("{{ row.datecreated }}");document.write(formatDate(date,'%M/%d %H:%m'));</script>
  {% if ISADMIN %}
  <button type="button" class="delete" data-url="/del/{{row.key.id }}/{{ row.filename|escape }}">Delete files</button>
  {% endif %}
  </td>
</tr>
 {% endfor %}


</table>
{% for link in LINKS %}
 <a href="{{ link.1 }}">{{ link.0 }}</a>
{% endfor %}

<script type="text/javascript" defer="defer">
  $().ready(function(){
    $('#deleteallbutton').button({icons: {primary: 'ui-icon-trash'}}).
        click(function(event) {
          var confirmed  = confirm("This will delete every record in this table and the blobstore. Really delete?");
          if (!confirmed) {
            event.preventDefault();
            return false;
          }
          $('#confirm_delete_all').val("deleteall")
          $.post('/deleteall', $('#deleteallrecords').serialize(), function(result) {alert(result)});
        });

    // individual delete buttons in list
    $('button.delete').button({
                text: false,
                icons: {primary: 'ui-icon-trash'}
            }).click(function(evt) {
              delurl = evt.currentTarget.dataset.url;
              $.ajax({url:delurl, type:'post'});
              $(evt.currentTarget).closest('tr').hide('fast');
              });

    $('#saveas').button({icons:{primary:'ui-icon-disk'}});
    $('#filter').button({icons:{primary:'ui-icon-search'}});
    $('#clearfilter').button({icons:{primary:'ui-icon-closethick'}});

    $('#deletebatch').button({icons:{primary:'ui-icon-trash'}}).
            click(function() {
            var confirmed = confirm("Delete records for the current batch diaplayed?");
            if (!confirmed) {
              event.preventDefault();
              return false;
            }

            });
    
    // set up the table stuff
    $(".jtable th").each(function(){
      $(this).addClass("ui-state-default");
    });
    $(".jtable td").each(function(){

      $(this).addClass("ui-widget-content");

    });
    $(".jtable tr").hover(
      function()
      {
        $(this).children("td").addClass("ui-state-hover");
      },
      function()
      {
        $(this).children("td").removeClass("ui-state-hover");
      }
  );
    $(".jtable tr").click(function(){

      $(this).children("td").toggleClass("ui-state-highlight");
    });

  });
</script>
</body>
</html>